﻿@model WriterStars.Models.ViewModels.OrderViewModel

<link href="~/Content/jquery-ui/datepicker/jquery-ui.datepicker.min.css" rel="stylesheet" />
<style>
    .density-info{
        font-size:12px;
        vertical-align:middle;
    }
    .additional-info-head{
        color:red;
        padding-top:45px;
        border-top:1px solid black;
    }

    .additional-info-text{
        font-size:16px;
    }
</style>

<h3>Create your order</h3>
<br />
<div class="col-xs-12 col-md-10">
    @using (Html.BeginForm("create", "order", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary("", new { @class = "text-danger" })
        @Html.HiddenFor(x => x.DueDate)

        <div class="form-group">
            @Html.LabelFor(x => x.OrderInfo, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10">
                @Html.TextBoxFor(x => x.OrderInfo, new { @class = "form-control", @placeholder = "e.g. One 300 words book" })
            </div>
        </div>
    <div class="form-group">
        @Html.LabelFor(x => x.KeyWords, new { @class = "col-sm-2 control-label" })

        <div class="col-sm-10">
            @Html.TextBoxFor(x => x.KeyWords, new { @class = "form-control",  @placeholder = "Primary key words" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(x => x.KeyWordsDensity, new { @class = "col-sm-2 control-label" })

        <div class="col-sm-10">
            @Html.RadioButtonFor(x => x.KeyWordsDensity, 1) <span class="density-info">low(2-3)</span>
            @Html.RadioButtonFor(x => x.KeyWordsDensity, 2) <span class="density-info">normal(4-6)</span>
            @Html.RadioButtonFor(x => x.KeyWordsDensity, 3) <span class="density-info">high(7-12)</span>
        </div>
    </div>
        <div class="form-group">
            @Html.LabelFor(x => x.Description, new { @class = "col-sm-2 control-label" })
            
            <div class="col-sm-10">
                @Html.TextAreaFor(x => x.Description, new { @class = "form-control", @rows = 4, @placeholder = "e.g. I would like an book describing the polar bears hunting methods that will . . ." })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(x => x.ExpectedPrice, new { @class = "col-sm-2 control-label" })

            <div class="col-sm-10">
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    @Html.TextBoxFor(x => x.ExpectedPrice, new { @class = "form-control", @placeholder = "e.g. 5" })
                </div>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(x => x.DueDate, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10">
                <input id="datepicker" type="text" class="form-control"/>
            </div>
        </div>

        <br />
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Submit order</button>
            </div>
        </div>

    }
    <br />
    <h6 class="additional-info-head">Additional Questions?</h6>
    <p class="additional-info-text">
        If you have any additional questions about our services in general, please don't hesitate to ask. You can always use the email address below to contact our team.
        Thank you!
    </p>
</div>


@section Scripts
{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery-ui/datepicker/jquery-ui.datepicker.js"></script>

    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(function () {
            $('#datepicker').datepicker({
                minDate: 0,
                onClose: function (date) {
                    if (date == '' || date == undefined || date == null) {
                        date = new Date();
                        date.setDate(date.getDate() + 1);
                    }

            
                    $("#DueDate").val(getDateString(date));
                }
            });
            
            $('#datepicker').datepicker('setDate', new Date());
            $("#DueDate").val(getDateString(new Date()));

        })

        function getDateString(date) {
            var date = new Date(date),
                day = date.getDate(),
                month = date.getMonth() + 1,
                year = date.getFullYear(),
                dateString = month + '/' + day + '/' + year;

            return dateString;

        }

    </script>
}